:root{
  --accent: #ff6b35;
  --accent-2: #ff9a66;
  --bg-1: #071226;
  --bg-2: #0b2a3a;
  --glass: rgba(255,255,255,0.06);
  --card-glass: rgba(255,255,255,0.08);
  --muted: #9aa6b2;
  --text: #e9f2f7;
  --soft: rgba(2,12,23,0.45);
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-soft: 0 8px 30px rgba(2,10,26,0.45);
  --shadow-elev: 0 18px 50px rgba(2,10,26,0.5);
  --glass-border: rgba(255,255,255,0.12);
  --max-width: 1310px;
}

*{box-sizing:border-box;}
html,body{height:100%;}

body{
  margin:0; padding:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
  color:var(--text);
  background:
    radial-gradient(ellipse at 10% 10%, rgba(255,107,53,0.06) 0%, transparent 20%),
    linear-gradient(180deg, rgba(3,18,30,0.72), rgba(1,8,20,0.82)),
    url('./IGimages/facility1.jpg') center/cover no-repeat fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================================================
   MAIN CONTAINER
   ========================================================= */
.container{
  max-width:var(--max-width);
  margin:84px auto 48px;
  padding:28px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(8px) saturate(110%);
  -webkit-backdrop-filter:blur(8px) saturate(110%);
  border:1px solid rgba(255,255,255,0.04);
  position:relative; z-index:20;
}

/* Header */
.header{text-align:center; margin-bottom:22px;}
.header h1{
  font-size:48px; margin:0;
  letter-spacing:0.6px; line-height:1;
  color:var(--text); font-weight:700;
  text-transform:uppercase;
  text-shadow:0 6px 30px rgba(0,0,0,0.45);
}
.header p{
  color:var(--muted);
  font-size:16px;
  margin-top:8px;
}

/* =========================================================
   TOP CONTROLS
   ========================================================= */
.logo-container{
  position:fixed;
  top:18px;
  right:26px;
  z-index:80;
}
.site-logo{
  width:92px;
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
}

.hamburger{
  position:fixed;
  left:18px;
  top:12px;
  z-index:90;
  cursor:pointer;
  padding:12px 14px;
  border-radius:12px;
  font-weight:600;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
  box-shadow:var(--shadow-soft);
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar{
  height:100%;
  width:0;
  position:fixed;
  left:0;
  top:0;
  z-index:100;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-right:1px solid rgba(255,255,255,0.04);
  overflow-x:hidden;
  transition:width .38s cubic-bezier(.2,.9,.2,1);
  padding-top:64px;
}
.sidebar.open{width:300px;}

.sidebar a{
  display:block;
  padding:14px 22px;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  border-radius:10px;
  margin:8px 12px;
  transition:transform .22s ease, background .22s ease;
}
.sidebar a:hover{
  transform:translateX(6px);
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.closebtn{
  position:absolute;
  top:12px;
  right:18px;
  font-size:30px;
  cursor:pointer;
}

/* =========================================================
   GALLERY GRID
   ========================================================= */
.gallery-container{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  margin-top:6px;
}

@media (max-width: 768px) {
  .gallery-container{
    grid-template-columns:1fr;
  }
}

.fitness-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  overflow:hidden;
  transition:transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s ease;
  box-shadow:0 8px 28px rgba(2,8,22,0.35);
  border:1px solid rgba(255,255,255,0.04);
}
.fitness-card:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:var(--shadow-elev);
}
.fitness-card img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
}
.card-text{padding:18px;}
.card-text h3{margin:0 0 8px;}
.card-text p{margin:0; color:var(--muted);}

/* =========================================================
   ABOUT SECTION
   FIXED: selector now matches "about-section"
   ========================================================= */
.about-section{
  display:flex;
  justify-content:center;
  margin:40px 0;
}

.about-circle{
  width:360px;
  height:360px;
  border-radius:50%;
  padding:34px;
  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);

  box-shadow:0 18px 50px rgba(2,10,26,0.45);
  border:1px solid var(--glass-border);
  color:var(--text);
  text-align:center;
  line-height:1.45;
}

/* =========================================================
   FEATURES SECTION
   FIXED SPACING + CLEAN RESPONSIVE GRID
   ========================================================= */
.features-section{
  width:100%;
  padding:64px 18px;
  margin-top:36px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
}

.features-section .inner{
  max-width:var(--max-width);
  margin:0 auto;
  text-align:center;
  padding:0 12px; /* NEW tight spacing fix */
}

.features-title{
  font-size:36px;
  font-weight:700;
  margin:0;
}
.features-subtext{
  max-width:720px;
  margin:10px auto 28px;
  color:var(--muted);
}

.features-grid{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); /* widened min width */
  gap:32px; /* slightly larger gap */
}

/* Feature card */
/* ============================
   FEATURE CARD — FINAL VERSION
   ============================ */
.feature{
  padding:26px;
  border-radius:15px;
  display:flex;
  gap:16px;
  align-items:flex-start;

  /* Glass Effect */
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Depth / Glow */
  box-shadow: 0 18px 45px rgba(0,0,0,0.50);

  /* Animation */
  transition: transform .28s ease, box-shadow .28s ease;
}

.feature:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 60px rgba(0,0,0,0.55);
}

/* Title */
.feature h3{
  margin:0 0 8px;
  font-size:17px;
  line-height:1.3;
  color:var(--text);
}

/* Paragraph */
.feature p{
  font-size:14px;
  line-height:1.5;
  max-width:320px;
  color:var(--muted);
}

/* Icon Box */
.feature i{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:white;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
}


    /* Responsive design */
    @media screen and (max-width: 768px) {
      .header h1 {
        font-size: 36px;
        margin-bottom: 10px;
      }
      
      .header p {
        font-size: 16px;
      }
      
      .logo-container {
        top: 10px;
        right: 10px;
      }
      
      .site-logo {
        width: 60px;
      }
      
      .hamburger {
        font-size: 24px;
        padding: 12px;
      }
      
      .container {
        padding: 15px;
      }
      
      .gallery-container {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 15px;
      }
      
      .fitness-card {
        max-width: 100%;
      }
      
      .about {
        margin: 30px 0;
        padding: 0 15px;
      }
      
      .about-circle {
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 250px;
        border-radius: 20px;
        padding: 20px;
      }
      
      .footer-content {
        flex-direction: column;
      }
      
      .footer-section {
        margin-bottom: 20px;
        min-width: 100%;
      }
      
      .social-icons {
        justify-content: center;
      }
    }
    
    @media screen and (max-width: 480px) {
      .header h1 {
        font-size: 28px;
      }
      
      .header p {
        font-size: 14px;
      }
      
      .site-logo {
        width: 50px;
      }
      
      .logo-container {
        top: 8px;
        right: 8px;
      }
      
      .hamburger {
        font-size: 20px;
        padding: 10px;
      }
      
      .container {
        padding: 10px;
      }
      
      .gallery-container {
        padding: 10px;
        gap: 10px;
      }
      
      .fitness-card img {
        height: 150px;
      }
      
      .card-text h3 {
        font-size: 16px;
      }
      
      .card-text p {
        font-size: 13px;
      }
      
      .about-circle {
        max-width: 100%;
        min-height: 200px;
        padding: 15px;
        font-size: 14px;
      }
      
      .footer-section {
        padding: 15px;
      }
      
      .footer-section h3 {
        font-size: 16px;
      }
    }
/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: #ffffff;
  color: #333333;
  padding: 36px 0;
  margin-top: 40px;
}

.footer-content{
  display:flex;
  gap:18px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 18px;
  flex-wrap:wrap;
}

.footer-section{flex:1; min-width:220px; color: #333333;}
.footer-section h3{color: #333333;}
.footer-section a{color: #333333;}
.footer-section a:hover{color: #4a89dc;}
.social-icons{display:flex; gap:12px;}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333333;
}




/* =========================================================
   RESPONSIVENESS
   ========================================================= */
@media (max-width:980px){
  .header h1{font-size:40px;}
  .about-circle{width:320px; height:320px;}
  .features-title{font-size:30px;}
}

@media (max-width:680px){
  .container{
    margin:72px 14px 24px;
    padding:18px;
  }

  .about-circle{
    width:260px;
    height:260px;
    padding:20px;
  }

  .features-grid{
    grid-template-columns:1fr;
    gap:22px;
  }

  .sidebar.open{width:260px;}
}

@media (max-width:420px){
  .hamburger{left:8px; top:8px; padding:10px;}
  .site-logo{width:64px;}
  .about-circle{width:220px; height:220px;}
}

/* =========================================================
   ACCESSIBILITY + FALLBACKS
   ========================================================= */
a:focus,button:focus,.btn:focus{
  outline:3px solid rgba(255,107,53,0.18);
  outline-offset:3px;
}

@supports not ((-webkit-backdrop-filter:blur(6px)) or (backdrop-filter:blur(6px))){
  .container,
  .about-circle,
  .sidebar,
  .fitness-card,
  .feature{
    background-color:rgba(255,255,255,0.02);
  }
}